<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>设备运行状态</title>
</head>
<link href="../../css/index.css" rel="stylesheet">
<style>
  #scheme-config {
    width: 100vw;
    padding: 0 16px 16px 16px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .scheme-btn {
    position: absolute;
  }
  input {
    height: 25px;
  }
  .scheme-content {
    display: flex;
    width: 100%;
  }
  .scheme-table {
    flex: 1;
    padding-left: 10px;
  }
  .sub-list {
    flex: 0 0 150px;
  }
  .sub-item {
    /* padding: 10px 0; */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 10px;
    padding: 10px 5px;
  }
  .active-sub {
    background: linear-gradient(to right, rgba(64, 158, 255, 0.3), #fff);
  }
  .run-time {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
</style>

<body>
  <div id="scheme-config">
    <div class="message" :class="message.type" v-if="message.text">{{message.text}}</div>
    <div class="scheme-content">
      <div class="sub-list">
        <div class="common-title">子区列表</div>
        <div v-for="item in baseData" 
          @click="handleChangeSub(item)"
          class="sub-item" :class="item.subId === currentSub.subId ? 'active-sub' : ''">
          <div>
            {{item.subId}}
          </div>
          <div>
            <button>新增</button>
          </div>
        </div>
      </div>
      <div class="scheme-table" v-if="pageType === 'view'">
        <div class="common-title">查看子区【{{currentSub.subId}}】路口方案</div>
        <table style="width: 100%" border="1" :class="currentSchemeKey ? 'has-scheme' : ''">
          <tr>
            <th class="cross-title">路口</th>
            <th class="cross-title">运行时段</th>
            <th class="cross-title" v-for="item in stageConfig">{{item.key}}</th>
            <th class="cross-title">相位差</th>
            <!-- <th class="cross-title">相序</th> -->
            <th class="cross-title">周期长</th>
          </tr>
          <tr class="center" 
            v-for="(item, index) in currentSiteList" :key="item.subId"
            :class="index % 2 === 0 ? 'odd' : 'even'">
            <!-- 路口 -->
            <td>
              {{item.site}}
            </td>
            <td>
              {{item.time}}
            </td>
            <!-- 方案配置的A-G -->
            <td v-for="item in stageConfig">
              <div>-</div>
            </td>
            <!-- 相位差 -->
            <td>
              {{item.offset}}
            </td>
            <!-- 相序 -->
            <!-- <td>
              <input style="width: 90px;" />
            </td> -->
            <!-- 周期长 -->
            <td>
              {{item.cycle}}
            </td>
          </tr>
          <tr v-if="loading.table">
            <th colspan="15">
              <img src="../../assets/jiazai.png" class="loading" />
            </th>
          </tr>
        </table>
      </div>
      <div class="scheme-table" v-if="pageType === 'add'">
        <div class="common-title">查看【{{currentSub.subId}}】路口方案</div>
        <table style="width: 100%" border="1" :class="currentSchemeKey ? 'has-scheme' : ''">
          <tr>
            <th class="cross-title">路口</th>
            <th class="cross-title">运行时段</th>
            <th class="cross-title" v-for="item in stageConfig">{{item.key}}</th>
            <th class="cross-title">相位差</th>
            <th class="cross-title">相序</th>
            <th class="cross-title">周期长</th>
          </tr>
          <tr class="center" 
            v-for="(item, index) in currentSub.siteStatuses" :key="item.subId"
            :class="index % 2 === 0 ? 'odd' : 'even'">
            <!-- 路口 -->
            <td>
              {{item.siteId}}
            </td>
            <td>11</td>
            <!-- 方案配置的A-G -->
            <td v-for="item in stageConfig">
              <input style="width: 50px;" />
            </td>
            <!-- 相位差 -->
            <td>
              <input style="width: 50px;" />
            </td>
            <!-- 相序 -->
            <td>
              <input style="width: 90px;" />
            </td>
            <!-- 周期长 -->
            <td>
              <input style="width: 60px;" />
            </td>
          </tr>
          <tr v-if="loading.table">
            <th colspan="15">
              <img src="./assets/jiazai.png" class="loading" />
            </th>
          </tr>
        </table>
      </div>
    </div>
  </div>
</body>
<script src="../../js/mock/firstEdition/statusMock.js"></script>
<script src="../../config.js"></script>
<script src="../../js/vue3.js"></script>
<script src="../../js/mock/firstEdition/schemeMock.js"></script>
<script>
  const { createApp, ref, nextTick, reactive, onMounted, onUnmounted, watch, computed } = Vue
  const app = createApp({
    setup() {

      // 转换前的数据
      let baseData = ref([])

      let currentSub = ref({})

      const pageType = ref('')

      const stageConfig = {
        A: {key: 'A'},
        B: {key: 'B'},
        C: {key: 'C'},
        D: {key: 'D'},
        E: {key: 'E'},
        F: {key: 'F'},
        G: {key: 'G'}
      }

      const MESSAGE_TYPE = {
        'SUCCESS': 'success',
        'INFO': 'info',
        'ALERT': 'alert',
        'ERROR': 'error'
      }

      const loading = reactive({
        reload: false, // 刷新时段
        open: false, // 开启子区开关
        close: false, // 关闭子区开关
        table: false, // 表格刷新
        editTime: false, // 编辑时段
        deleteTime: false, // 删除时段
      })

      const message = reactive({
        type: '',
        text: ''
      })

      // 弹窗消息1.5秒消失
      watch(
        () => message.text,
        () => {
          if (message.text) {
            setTimeout(() => {
              message.text = ''
            }, 2000)
          }
        }
      )


      // 当前查看的方案类型
      const currentSchemeKey = ref('')

      // 查看方案 data 查看的数据 key 查看的方案类型
      const handleClickScheme = (data) => {
        currentSchemeKey.value = data.siteId
      }

      // 初始化渲染数据
      const transformData = (originData) => {
        let data = []
        currentSiteList.value.forEach((element, eleIndex) => {
          element.siteStatuses.forEach((item, itemIndex) => {
            data.push({
              ...element,
              ...item,
              isFirst: itemIndex === 0, // 是否子区的第一条数据，第一条数据展示子区
              rowNum: element.siteStatuses?.length || 1 // 子区的合并行数
            })
          })
        });
        return data
      }

      // 获取接口返回的数据
      const getInitData = () => {
        const resData = window.localStorage.getItem('BASE_DICTS')
        baseData.value = JSON.parse(resData).subMsg
        handleChangeSub(baseData.value[0])
        // currentSub.value = baseData.value[0]
      }

      // 子区切换
      const handleChangeSub = (item) => {
        currentSub.value = item
        getCrossScheme()
      }

      const currentSiteList = ref([])
      // 获取子区的方案信息
      const getCrossScheme = () => {
        pageType.value = 'view'
        const list = currentSub.value.siteStatuses.map(item => item.siteId)
        let schemeLength = {}
        schemeMock.forEach(item => {
          if (!schemeLength[item.site]) {
            schemeLength[item.site] = 0
          }    
          schemeLength[item.site] ++
        })        
        currentSiteList.value = []
        schemeMock.forEach(item => {       
          if (list.includes(item.site + '')) {
            currentSiteList.value.push(item)
          }
        })
        currentSiteList.value.sort((a, b) => Number(a.site) - Number(b.site))
        transformData()       
      }

      let timer = null
      onMounted(() => {
        getInitData()
      })

      onUnmounted(() => {
        timer && clearInterval(timer)
      })
      return {
        currentSchemeKey,
        message,
        loading,
        stageConfig,
        baseData,
        currentSub,
        currentSiteList,
        pageType,
        handleClickScheme,
        handleChangeSub
      }
    }
  })
  app.mount("#scheme-config");
</script>

</html>